import React from 'react';
import './Pagination.scss'
import { Col, Button, Input, Pagination } from 'antd';

class AreaDataNav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toCurrent: 0,
            toPage:''
        }
    }
    componentDidMount() {

    }

    itemRender = (current, type, originalElement) => {
        if (type === 'prev') {
            return <span>{`<`}</span>;
        }
        if (type === 'next') {
            return <span>{`下一页 >`}</span>;
        }
        // console.log(type)
        return originalElement;
    }
    onChangePages = pageNumber => {
        let _this = this;
        this.setState({
            current: pageNumber
        }, () => {
            _this.props.getChangeData(pageNumber)
        })
    }
    toJumper = e => {
        if(e){
            this.onChangePages(e);
            this.setState({
                toPage: ''
            })
        }
    }
    
    toPage = e => {
        this.setState({
            toCurrent: parseInt(e.target.value),
            toPage: e.target.value
        })
    }

    render() {
        const { toCurrent, toPage } = this.state;
        const pageSize = this.props.pageSize ? this.props.pageSize : 10
        const current = this.props.total !== 0 ? this.props.current : 0
        return (
            <Col className="Pagination_pages">
                <Button className="toPages" onClick={this.toJumper.bind(this, toCurrent)} >确定</Button>
                <span className="showQuickJumper">
                    <span>到第</span>
                    <Input onChange={this.toPage.bind(this)} value={toPage}></Input>
                    <span>页</span>
                </span>
                <span className="num" > <span>{current}</span>{'/' + Math.ceil(this.props.total / pageSize)}</span>
                <Pagination
                    total={this.props.total}
                    pageSize={pageSize}
                    showSizeChanger={false}
                    current={this.props.current}
                    defaultCurrent={1}
                    itemRender={this.itemRender}
                    onChange={this.onChangePages}
                />
            </Col>
        )
    }
}
export default AreaDataNav;
